<template>
  <div class="address-book">
    <van-nav-bar
      title="收货地址"
      right-text="新建"
      @click-right="addAddress"
    />
    <van-list>
      <van-cell
        v-for="(address, index) in addresses"
        :key="index"
        :title="address.name"
        :label="address.phone"
        is-link
        @click="editAddress(index)"
      >
        <template #default-slot>
          <div class="address-item">
            <span>{{ address.name }}</span>
            <span class="phone-number">{{ address.phone }}</span>
            <div class="address-detail">
              收货地址：{{ address.detail }}
            </div>
            <van-tag type="primary" v-if="address.isDefault">默认</van-tag>
          </div>
        </template>
        <template #right-icon>
          <van-icon name="edit" />
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Image as VanImage, Tag as VanTag, List, Cell, NavBar, Icon } from 'vant';

const router = useRouter();
const addresses = ref([
  {
    name: 'Daisy',
    phone: '19288888486',
    detail: '上海市徐汇区黎梅花园88栋',
    isDefault: true,
  },
  {
    name: 'Daisy',
    phone: '19288888486',
    detail: '上海市徐汇区黎梅花园88栋',
  },
  {
    name: 'Daisy',
    phone: '19288888486',
    detail: '上海市徐汇区黎梅花园88栋',
  },
  {
    name: 'Daisy',
    phone: '19288888486',
    detail: '上海市徐汇区黎梅花园88栋',
  },
]);

const addAddress = () => {
  router.push('/add-address');
};

const editAddress = (index) => {
  router.push(`/edit-address/${index}`);
};
</script>

<style scoped>
.address-book {
  padding: 16px;
  background-color: #f5f5f5;
}
.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phone-number {
  margin-left: 8px;
  color: #888;
}
.address-detail {
  margin-top: 4px;
  color: #666;
}
</style>